<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>管理后台</title>
    <link rel="stylesheet" href="../../static/admin/layui/css/layui.css" media="all"/>
    <link rel="stylesheet/less" href="../../../static/admin/css/index.less"/>
    <link rel="stylesheet" href="../../static/admin/css/jquery.pagination.css"/>
    <link rel="stylesheet/less" href="../../static/admin/css/user_redact.less"/>
    <script src="../../static/admin/js/jquery-1.12.3.js"></script>
    <script src="../../../static/admin/layui/layui.js"></script>
    <script src="../../static/admin/js/less.min.js"></script>
    <script src="../../static/admin/js/jquery.pagination.min.js"></script>
    <script src="../../../static/layer/layer.js"></script>

    <!--<script src="js/plugins/pace/pace.min.js"></script>-->
</head>
<style>
    .content img {
        width: 3rem;
    }

    img:hover {
        transform: scale(2, 2);
        transition: .5s transform;
    }

    .maskpsd1 {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 999;
    }

    .maskpsd1 .register {
        position: absolute;
        width: 40%;
        left: 30%;
        top: 25%;
        border: 1px solid #cccccc;
        border-radius: 8px;
        background-color: #fff;
    }

    .maskpsd1 .register ul {
        padding: 5px 20px 10px;
    }

    .maskpsd1 .register ul li {
        position: relative;
        padding: 5px 10px;
        border-bottom: 1px solid #ccc;
        min-height: 40px;
        line-height: 40px;
    }

    .maskpsd1 .register ul li h3 {
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
        color: #666;
    }

    .maskpsd1 .register ul li .closeBtn1 {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
    }

    .maskpsd1 .register ul li .regSpan {
        display: inline-block;
        width: 100px;
        text-align: left;
        margin-right: 10px;
    }

    .maskpsd1 .register ul li input[type=password] {
        width: 50%;
        height: 40px;
        line-height: 40px;
        border: 1px solid #A9A9A9;
        border-radius: 5px;
        background-color: #F7F7F7;
        font-size: 16px;
        padding-left: 10px;
        box-sizing: border-box;
    }

    .maskpsd1 .register ul li input[type=text] {
        width: 50%;
        height: 40px;
        line-height: 40px;
        border: 1px solid #A9A9A9;
        border-radius: 5px;
        background-color: #F7F7F7;
        font-size: 16px;
        padding-left: 10px;
        box-sizing: border-box;
    }

    {#    添加路由弹窗 #}
    .maskpsd2 {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 999;
    }

    .maskpsd2 .register {
        position: absolute;
        width: 40%;
        left: 30%;
        top: 25%;
        border: 1px solid #cccccc;
        border-radius: 8px;
        background-color: #fff;
    }

    .maskpsd2 .register ul {
        padding: 5px 20px 10px;
    }

    .maskpsd2 .register ul li {
        position: relative;
        padding: 5px 10px;
        border-bottom: 1px solid #ccc;
        min-height: 40px;
        line-height: 40px;
    }

    .maskpsd2 .register ul li h3 {
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
        color: #666;
    }

    .maskpsd2 .register ul li .closeBtn1 {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
    }

    .maskpsd2 .register ul li .regSpan {
        display: inline-block;
        width: 100px;
        text-align: left;
        margin-right: 10px;
    }

    .maskpsd2 .register ul li input[type=password] {
        width: 50%;
        height: 40px;
        line-height: 40px;
        border: 1px solid #A9A9A9;
        border-radius: 5px;
        background-color: #F7F7F7;
        font-size: 16px;
        padding-left: 10px;
        box-sizing: border-box;
    }

    .maskpsd2 .register ul li input[type=text] {
        width: 50%;
        height: 40px;
        line-height: 40px;
        border: 1px solid #A9A9A9;
        border-radius: 5px;
        background-color: #F7F7F7;
        font-size: 16px;
        padding-left: 10px;
        box-sizing: border-box;
    }
</style>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    {% include "/admin/left.html" %}
    <div class="layui-body">
        <div class="maskpsd1">
            <div class="register">
                <ul class="regBox">
                    <li>
                        <h3>添加管理员</h3>
                        <span class="add_xxx closeBtn1">关闭</span>
                    </li>
                    <li>
                        <span class="regSpan">请输入用户名</span>
                        <input type="text" title="" class="uname" id="add_username">
                    </li>
                    <li>
                        <span class="regSpan">请输入密码</span>
                        <input type="password" title="" class="uname" id="add_ps1">
                    </li>
                    <li>
                        <span class="regSpan">再次输入密码</span>
                        <input type="password" title="" class="uname" id="add_ps2">
                    </li>
                    <li>
                        <span class="regSpan">请选择账号类型</span>
                        <select id='admin_type'>
                        </select>
                    </li>
                    <li>
                        <span class="regSpan">备注</span>
                        <input type="text" title="" class="uname" id="admin_remark">
                    </li>
                    <li>
                        <button class="regUser1" id="add_tj">提交</button>
                    </li>
                </ul>
            </div>
        </div>
        <div class="maskpsd2">
            <div class="register">
                <ul class="regBox">
                    <li>
                        <h3>新增路由</h3>
                        <span class="add_xxx closeBtn1">关闭</span>
                    </li>
                    <li>
                        <span class="regSpan">路由名称</span>
                        <input type="text" title="" class="uname" id="link_name">
                    </li>
                    <li>
                        <span class="regSpan">路由地址</span>
                        <input type="text" title="" class="uname" id="link_address">
                    </li>

                    <li>
                        <button class="regUser1" onclick="add_links()" id="add_link">提交</button>
                    </li>
                </ul>
            </div>
        </div>
        <div id="box" class="fl">
            <div class="content">
                <h3>
                    管理员列表
                    <button style="float: right; margin-right:1rem;font-size: 14px;" class="psd1">新增管理员</button>
                </h3>
                <p style="text-align: left;">
                    <button style="margin-left:2rem;" class="psd2">新增路由</button>
                </p>

                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                    <tr>
                        <th width="15%">管理员ID</th>
                        <th width="15%">管理员账号</th>
                        <th width="15%">管理员类型</th>
                        <th width="15%">添加时间</th>
                        <th width="15%">状态</th>
                        <th width="15%">操作</th>
                    </tr>
                    </tbody>
                    {% if res['data'] is not none %}
                        {% for d in res['data'] %}
                            <tr>
                                <td>{{ d.id }}</td>
                                <td>{{ d.username }}</td>
                                <td>{{ d.admin_type }}</td>
                                <td>{{ d.create_time }}</td>
                                <td>
                                    {% if d.permission == 1 %}
                                        启用
                                    {% endif %}
                                    {% if d.permission == 2 %}
                                        禁用
                                    {% endif %}
                                </td>
                                <td>
{#                                    <button>#}
{#                                        <a href="javascript:;" onclick="">编辑</a>#}
{#                                    </button>#}
                                    {% if d.permission == 2 %}
                                        <button>
                                            <a href="javascript:;" onclick="admin_update_status({{ d.id }},1)">激活</a>
                                        </button>
                                    {% endif %}
                                    {% if d.permission == 1 %}
                                        <button>
                                            <a href="javascript:;" onclick="admin_update_status({{ d.id }},2)">禁用</a>
                                        </button>
                                    {% endif %}
                                    <button>
                                        <a href="javascript:;" onclick="delete_admin({{ d.id }})">删除</a>
                                    </button>
                                {% if d.username != 'admin' %}
                                    <button>
                                        <a href="/admin/power.html?uid={{ d.id }}">权限</a>
                                    </button>
                                {% endif %}
                                </td>
                            </tr>

                        {% endfor %}
                    {% endif %}
                </table>
            </div>
            <div id="pagination1" class="page fr" style="margin-right: 1%;">
                <div class="ui-pagination-container">
                    <a id="ssy" href="/admin/admin_list.html?page=1" class="ui-pagination-page-item"
                       data-current="1">首页</a>
                    <a id="sy" href="/admin/admin_list.html?page={{ res['page'] - 1 }}" class="ui-pagination-page-item"
                       data-current="1">上一页</a>
                    {% for i in range(res['page'] - 2, res['page'] + 3) %}
                        <a href="/admin/admin_list.html?page={{ i }}"
                           class="ui-pagination-page-item{% if res['page'] == i %} active{% endif %}" id="{{ i }}"
                           style="display:none;">{{ i }}</a>
                    {% endfor %}
                    <a id="xy" href="/admin/admin_list.html?page={{ res['page'] + 1 }}" class="ui-pagination-page-item"
                       data-current="3">下一页</a>
                    <a id="wy" href="/admin/admin_list.html?page={{ res['max_page'] }}" class="ui-pagination-page-item"
                       data-current="12">尾页</a>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;

    });
</script>
</body>

</html>
<script src="../../static/admin/laydate/laydate.js"></script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#test1'
        });

        laydate.render({
            elem: '#test2'
        });
    })
    $('.psd1').click(function () {
        $(".maskpsd1").fadeIn();
        $.ajax({
            type: 'get',
            url: '/admin/get_all_admin_type',
            success: function (data) {
                var html = "";
                for (var i in data) {
                    html += "<option value='" + data[i].id + "'>" + data[i].admin_type + "</option>";
                }
                $('#admin_type').html(html);
            }
        })
    });

    $('.psd2').click(function () {
        $(".maskpsd2").fadeIn();

    })
    $('.add_xxx').click(function () {
        $(".maskpsd1").fadeOut();
        $('.imp').css('display', 'none')
    })
    $('.add_xxx').click(function () {
        $(".maskpsd2").fadeOut();
        $('.imp').css('display', 'none')
    })
    $(function () {
        var zx = {{ res['page'] }};
        var zd = {{ res['max_page'] }};
        if (zx <= 1) {
            $('#sy').remove();
            $('#ssy').remove();
        }
        if (zx >= zd) {
            $('#xy').remove();
            $('#wy').remove();
        }
        for (var i = 1; i <= zd; i++) {
            if ($('#' + i).text() <= zx + 2 && $('#' + i).text() >= zx - 2) {
                $('#' + i).show();
            }
            if ($('#' + i).text() == zx) {
                $('#' + i).attr("href", "javascript:;");
            }
        }
        $('#add_tj').click(function () {
            var username = $('#add_username').val();
            var new1 = $('#add_ps1').val();
            var new2 = $('#add_ps2').val();
            var admin_remark = $('#admin_remark').val();
            var admin_type = $('#admin_type').val();
            if (new1 == new2) {
                $.ajax({
                    type: 'post',
                    url: '/admin/add_admin',
                    data: {
                        'username': username,
                        'password': new2,
                        'admin_type': admin_type,
                        'admin_remark': admin_remark
                    },
                    success: function (data) {
                        if (data == 'success') {
                            layer.msg("操作成功", {time: 2000}, function () {
                                $(".maskpsd1").fadeOut();
                                $('.imp').css('display', 'none')
                                window.location = '/admin/admin_list.html?page={{ res['page'] }}';
                            });
                        } else if (data == 'error') {
                            alert('用户名已被使用！！！');
                        } else {
                            alert('添加失败')
                        }
                    }
                });
            } else {
                alert('两次密码不一致');
            }
        });
    });

    function admin_update_status(id, status) {
        var tt = "";
        if (status == 1) {
            tt = "确定启用"
        } else {
            tt = "确定禁用"
        }
        layer.open({
            content: tt,
            btn: ['确定', '取消'],
            shadeClose: false,
            yes: function () {
                $.ajax({
                    type: 'post',
                    url: '/admin/admin_update_status',
                    data: {
                        'id': id,
                        'status': status
                    },
                    success: function (data) {
                        if (data > 0) {
                            layer.msg("操作成功", {time: 2000}, function () {
                                window.location = '/admin/admin_list.html?page={{ res['page'] }}';
                            });
                        } else {
                            layer.msg("操作失败", {time: 2000});
                        }
                    }
                });
            }
        })
    }

    function delete_admin(id) {
        layer.open({
            content: "删除管理员",
            btn: ['确定', '取消'],
            shadeClose: false,
            yes: function () {
                $.ajax({
                    type: 'post',
                    url: '/admin/admin_delete',
                    data: {
                        'id': id
                    },
                    success: function (data) {
                        if (data > 0) {
                            layer.msg("操作成功", {time: 2000}, function () {
                                window.location = '/admin/admin_list.html?page={{ res['page'] }}';
                            });

                        } else {
                            layer.msg("操作失败", {time: 2000});
                        }
                    }
                });
            }
        })
    }

    function add_links(){
        var link_name = $('#link_name').val();
        var link_address = $('#link_address').val();
        if (link_name == ''){
            layer.msg("路由名称不能为空", {time:1200});
            return
        }
        if (link_address == ''){
            layer.msg("路由地址不能为空");
            return
        }
        $.ajax({
            url:"/admin/add_link_list",
            type:"post",
            data:{
                'link_name':link_name,
                'link_address':link_address
            },
            dataType:"json",
            success:function(msg){
                if (msg.status == 1){
                    layer.msg('操作成功', {time:1500}, function(){
                        $(".maskpsd2").fadeOut();
                    })
                }else if(msg.status == 2){
                    layer.msg("路由已存在", {time:1200});
                } else {
                    layer.msg("操作失败", {time:1200});
                }
            }
        })
    }
</script>
